<template>
    <div class="circle">
        <span class="words">{{world}}</span>
    </div>
</template>

<script>
export default {
  name: 'circle',
  props: {
    world: {
      type: String,
      default: '这是一个圆圈'
    },
    size: {
      type: String,
      default: '5vh'
    },
    color: {
      type: String,
      default: 'green'
    }
  }
}
</script>

<style lang="less" scoped>
.circle {
    width: 7vw;
    height: 7vw;
    border-radius: 50%;
    background-color: red;
    opacity: 0.3;
    &:hover {
        animation: circlel 3s ease-in-out 0.5s 1;
    }
    .words {
        color: white;
        position: relative;
        top: 41%;
        left: 40%;
    }
}
@keyframes circlel {
    50% { width: 10vw;height: 10vw; }
    100% { width: 14vw;height: 14vw; }
}
</style>
